<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <!-- <link rel="stylesheet" href="./css/sortable.min.css" /> -->
    <style>
      .navbar-header {
        width: 200px;
        margin: 0 auto;
        float: none;
      }
      .navbar-brand {
        font-size: 24px;
      }

      .projects-header {
        margin-top: 61px;
        text-align: center;
      }

      [data-sjsel] {
        top: auto;
        opacity: 1;
      }

      select {
        height: 25px;
      }
      .form-group {
        margin: 10px;
      }

      #row{
        display: flex;
        flex-wrap: wrap;
      }
          
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <!-- 顶部菜单 -->
      <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
          <a class="navbar-brand hidden-sm">项目描述生成</a>
        </div>
      </div>

      <!-- 条件定制区 -->
      <div class="projects-header page-header">
        <p>
          通过选择如下条件的组合，可以生成对应类型的项目描述，自行选择合适的描述即可。
        </p>
        <hr />
        <form class="form-inline">
          <div class="form-group">
            <label for="exampleInputName2">项目类型</label>
            <select name="" id="projectType">
              <option value="-1">--请选择项目类型--</option>
              <option value="1">OA类型后台管理系统</option>
              <option value="2">商城后台管理系统</option>
            </select>
          </div>

          <div class="form-group">
            <label for="exampleInputName2">技术框架</label>
            <select name="" id="Framework">
              <option value="-1">--请选择技术框架--</option>
              <option value="1">Vue</option>
              <option value="2">React</option>
              <option value="3">Uni-App</option>
            </select>
          </div>
          <button type="button" id="btnquery" class="btn btn-success">查询</button>
        </form>
      </div>

      <!-- 项目描述列表 -->
      <div>
        <div class="row" id="row" class="sjs-default">
        
          <!-- <div class="col-sm-6 col-md-4 col-lg-3 ">
           <div class="thumbnail" style="height: 336px;">
              <a href="https://www.youzhan.org/" title="Bootstrap 优站精选" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'youzhan-tile'])">
                <img class="lazy" src="https://fastly.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.60/dist/img/expo.png" width="300" height="150" data-src="https://fastly.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.60/dist/img/expo.png" alt="Bootstrap 优站精选">
              </a>
              <div class="caption">
                <h3>
                    <a href="https://www.youzhan.org/" title="Bootstrap 优站精选" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'youzhan-tile'])">优站精选<br><small> Bootstrap 网站实例</small></a>
                </h3>
                <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
              </div>
            </div>
          </div> -->

          <!-- 瀑布流布局
             <div  data-sjsel="flatty" class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail" style="height: auto;">
              <div class="caption">
                <h4>
                  项目名称：优贝商城 （PC端）   周期：4个月
                </h4>
               
                <p>
                  项目内容：该项目是一个 PC 端购买商城，主要功能模块有登陆，商品分类，商品列表，商品详情，购物车，支付模块，个人中心，整体项目利用 Vue、Vue-Router、Vuex、Axios 等技术完成，采用前后端分离式开发
                  负责模块：商品分类、商品详情，购物车等模块
                  项目技术：
                  1、该项目主要使用 Vue.js 框架，使用 Vue-cli 脚手架快速开始模版，配合 Element-UI 组件库完成开发
                  2、使用 Vue-Router 添加嵌套路由功能，使用声明式导航和编程式导航完成页面的跳转
                  3、与后端人员沟通信息，获取 API 接口，便于商品分类，商品列表，商品详情模块的数据展示与数据操作
                  4、使用 axios 请求数据，渲染页面
                  5、对详情页进行数据更新修改，并且跳转到购物车页面，使用 computed 计算购物车的价格
                  6、运用 git 管理代码，多人合并开发
                </p>
              </div>
            </div>
          </div> -->

          <!-- <div data-sjsel="flatty" class="col-sm-6 col-md-4 col-lg-3 item">
            <div class="thumbnail" style="height: auto">
              <div class="caption">
                <h4>项目名称：优贝商城 （PC端） 周期：4个月</h4>

                <p>
                  项目内容：该项目是一个 PC
                  端购买商城，主要功能模块有登陆，商品分类，商品列表，商品详情，购物车，支付模块，个人中心，整体项目利用
                  Vue、Vue-Router、Vuex、Axios 等技术完成，采用前后端分离式开发
                  负责模块：商品分类、商品详情，购物车等模块 项目技术：
                  1、该项目主要使用 Vue.js 框架，使用 Vue-cli
                  脚手架快速开始模版，配合 Element-UI 组件库完成开发 2、使用
                  Vue-Router
                  添加嵌套路由功能，使用声明式导航和编程式导航完成页面的跳转
                  3、与后端人员沟通信息，获取 API
                  接口，便于商品分类，商品列表，商品详情模块的数据展示与数据操作
                  4、使用 axios 请求数据，渲染页面
                  5、对详情页进行数据更新修改，并且跳转到购物车页面，使用
                  computed 计算购物车的价格 6、运用 git 管理代码，多人合并开发
                </p>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>

    <script src="./lib/jquery-1.12.2.js"></script>
    <script src="./lib/sortable.min.js"></script>
    <script src="./lib/jquery.masonry.min.js"></script>
    <script src="./js/index1.js"></script>

    <script>
     
    </script>
  </body>
</html>
